<template>
	<view class="">
		<u-popup :show="noticeShow" :round="10" mode="center" bgColor="transparent">
			<view class="bullet-box">
				<view class="top">
					<view class="bg">
						<image src="/static/top-bg.png" />
					</view>
					<view class="sub">
						<view class="icon">
							<image :src="icon" />
						</view>
						<view class="title">{{ noticeData.title }}</view>
					</view>
				</view>
				<scroll-view :scroll-top="scrollTop" :scroll-y="true" class="scroll-Y" @scroll="scroll">
					<view class="content">
						<rich-text :nodes="noticeData.content"></rich-text>
					</view>
				</scroll-view>
				<!-- <view class="button">
					<u-button @click="handleOK" shape="circle" :color="buttonColor" :text="buttonText"></u-button>
				</view> -->
			</view>
			<view class="bullet-close">
				<u-icon @click="noticeClose" name="close-circle" color="#fff" size="34"></u-icon>
			</view>
		</u-popup>
		<view :class="{ popUpShow: showLikePop }" v-if="homeShow">
			<u-popup :show="filterShow" @close="filterClose" mode="top" border-radius="14">
				<view class="" style="margin-left: 10rpx;margin-right: 10rpx;z-index: 9999;margin-top: 100rpx;">
					<view class="" style="text-align: center;font-size: 30rpx; margin-top: 20rpx;margin-bottom: 20rpx;">
						筛选
					</view>
					<view class="">
						基本筛选
					</view>
					<u-cell-group>
						<u-cell title="年龄(岁)">
							<view slot="right-icon" class="cell-content">
								<view class="cell-item" @click="ageClick('min')">
									{{ minAge }}
								</view>
								—
								<view class="cell-item" @click="ageClick('max')">
									{{ maxAge }}
								</view>
							</view>

						</u-cell>
						<u-cell title="身高(cm)">
							<view slot="right-icon" class="cell-content">
								<view class="cell-item" @click="heightClick('min')">
									{{ minHeight }}
								</view>
								—
								<view class="cell-item" @click="heightClick('max')">
									{{ maxHeight }}
								</view>
							</view>

						</u-cell>
						<u-cell title="体重(kg)">
							<view slot="right-icon" class="cell-content">
								<view class="cell-item" @click="weightClick('min')">
									{{minWeight}}
								</view>
								—
								<view class="cell-item" @click="weightClick('max')">
									{{maxWeight}}
								</view>
							</view>
						</u-cell>
						<u-cell title="所属机构" :value="mechanismString" @click="mechanismClick"></u-cell>
					</u-cell-group>
					<view
						style="margin-top: 20rpx;margin-left: 10rpx;margin-right: 12rpx;height: 60rpx;padding-bottom: 30rpx;">
						<button class="unsign-signBtn"
							style="height: 60rpx;border-radius: 1rpx 0rpx 0rpx 1rpx;float: left;background-color: #FFFFFF;color: gray;font-size: 30rpx;border-width: 1rpx;border-color: gray;border:1px solid;width: 50%;align-items: center;justify-content: center;display: flex;"
							type="default" @click="resetSearch()" @click.stop="()=>{}">重置</button>
						<button class="unsign-signBtn"
							style="height: 60rpx;border-radius: 1rpx 0rpx 0rpx 1rpx;float: right;background-color: #3c9cff;color: #FFFFFF;font-size: 30rpx;width: 50%;align-items: center;justify-content: center;display: flex;"
							type="default" @click="confirmSearch()" @click.stop="()=>{}">确定</button>
					</view>
				</view>
			</u-popup>
			<u-picker :show="ageShow" :columns="ageList" @confirm="ageConfirm"></u-picker>
			<u-picker :show="heightShow" :columns="heightList" @confirm="heightConfirm"></u-picker>
			<u-picker :show="weightShow" :columns="weightList" @confirm="weightConfirm"></u-picker>
			<u-picker :show="mechanismShow" :columns="mechanismList" @confirm="mechanismConfirm"
				keyName="title"></u-picker>
			<view class="pageanima" v-if="isInit" :class="{ pagePop: showAnima }">
				<view class="div" style="height: 100%;background: #F4F5F9;">
					<u-navbar :bgColor="bgColor" :placeholder="true">
						<view class="u-nav-slot" slot="left" @click="screen">
							<image src="../../static/images/screen.png" class="img" mode="aspectFill"></image>
							<view class="text">筛选</view>
						</view>
					</u-navbar>

					<view class="">
						<view class="box">
							<view class="swiper">
								<ls-swiper :list="userData.imgList" imgKey="" :loop="true" :dots="true" :autoplay="true"
									:height="340" />
							</view>
							<view class="box-jj">
								<view class="box-jj-ta">
									<view class="box-jj-ta-left">
										<image src="../../static/images/yrz.png" class="img" mode="aspectFill">
										</image>
										<view class="te">{{ userData.school ? userData.school : '' }}</view>
										<view class="xian"></view>
										<view class="te">
											{{ userData.edu }}
										</view>
									</view>
								</view>
							</view>
							<view class="box-name">
								<view class="name">{{ userData.name }}</view>
								<image src="../../static/xiugai/nv.png" mode="aspectFill" v-if="userData.sex=='2'">
								</image>
								<image src="../../static/images/like/male.png" mode="aspectFill" v-else></image>
							</view>
							<view class="box-bq">
								<view class="">
									{{ userData.age ? userData.age : '' }}岁 ·
									{{ userData.height ? userData.height : '' }}cm ·
									{{ userData.weight ? userData.weight : '' }}kg
								</view>
								<view class="xian"></view>
								<view class="">{{ userData.nation ? userData.nation : '' }}</view>
							</view>
							<view class="ling">
								<image src="../../static/images/indexlable.png" class="img" mode="aspectFill">
								</image>
								<view class="text">正在寻觅</view>
							</view>

							<view class="line">
								<view class="sm-line" v-for="(item, index) in 12" :key="item"></view>
							</view>
							<view class="circle"></view>
							<view class="circles"></view>
							<view
								style="margin-top: 25rpx; margin-right: 40rpx;display: flex;flex-warp:warp;-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;">
								<view style="margin-left: 10rpx;margin-top: 10rpx;">
									<u-tag :text="'月收入：'+userData.income+'元'" type="warning" shape="circle"
										v-if="userData.income"></u-tag>
								</view>
								<view style="margin-left: 10rpx;margin-top: 10rpx;">
									<u-tag :text="'机构：'+userData.deptName" shape="circle"
										v-if="userData.deptName"></u-tag>
								</view>

							</view>
							<view class="" style="height: 44rpx;"></view>
						</view>
						<view class="safe-bottom">
							<view class="card">
								<view class="content">
									<view class="have_image">
										<image src="../../static/images/indexabout.png" mode="aspectFill"></image>
										<view class="title" style="font-family: SC-Bold;">自我介绍</view>
									</view>
									<view class="one" v-if="userData.introduce">
										{{
											userData.introduce
										}}
									</view>
									<view class="one"></view>
								</view>
							</view>
							<view class="card">
								<view class="content">
									<view class="have_image">
										<image src="../../static/images/indexlove.png" mode="aspectFill"></image>
										<view class="title" style="font-family: SC-Bold;">个性标签</view>
									</view>
									<view class=" mt25 fs28" style="color: #434343; ">
										<view
											style="margin-top: 25rpx; margin-right: 40rpx;display: flex;flex-warp:warp;-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;">
											<view v-for="(item,index) in userData.labelList" :key="index"
												style="margin: 10rpx;">
												<u-tag :text="item.remark" shape="circle"></u-tag>
											</view>

										</view>
									</view>
									<!-- <view
										style="margin-top: 25rpx; margin-right: 40rpx;display: flex;flex-warp:warp;-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;">
										<view v-for="(item,index) in userData.labelList" :key="index"
											style="margin-left: 10rpx;">
											<u-tag :text="item.remark" shape="circle"></u-tag>
										</view>

									</view> -->
									<view class="one"></view>
								</view>
							</view>
							<view class="bottom" v-if="false">
								<view class="line">
									<view class="sm-line" v-for="(item, index) in 12" :key="item"></view>
								</view>
								<view class="circle"></view>
								<view class="circles"></view>
							</view>

						</view>
					</view>
				</view>
				<view class="footer-fixed">
					<view class="left" @click="nextClick">
						<image src="../../static/images/clo.png" style="width: 100%;height: 100%;;" mode="aspectFill">
						</image>
					</view>
					<view class="right" @click="likeClick">
						<image src="../../static/images/con1.png" style="width: 100%;height: 100%;;" mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
			<!-- 推荐结束 -->
			<view v-else class="tuijian_over" @touchmove.stop.prevent="() => {}">
				<view class="imgbg">
					<image src="../../static/images/like/nowover.png" mode="aspectFill"></image>
					<view class="over-content">
						<view class="isover">本次推荐已结束</view>
						<view class="overtime">下次推荐明天中午12点整</view>
						<view class="nxet-tuijian" @click="goTips">下次推荐提醒我</view>
					</view>
				</view>
			</view>

		</view>
		<ELM ref="elm" :msg="tipMsg" :is-confirm="true" @confirm="confirma"></ELM>
	</view>
</template>

<script>
	var _self;
	let util = require('@/util/means.js');
	import ELM from '@/components/elm-toast/index.vue';
	import LsSwiper from '../../components/ls-swiper/index.vue';
	// import login from '../../components/login/login.vue';
	import {
		WS
	} from '@/util/wsConfig.js'
	import {
		getUserDetail,
		suggestList,
		markLikesUser,
		mechanismList,
		sysNotice,
		sysDict
	} from '@/common/api.js';
	export default {
		components: {
			ELM,
			// login,
			LsSwiper
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				homeShow: false,
				tipMsg: '',
				isConfirm: false,
				mutualInfo: {},
				showLikePop: false,
				animUrl: '',
				showAnima: false,
				showBtn: true,
				showArrowDown: true,
				isInit: true,
				showTabbar: true,
				scrollTop: 0,
				unfold: false,
				isLoginPop: false,
				age: '',
				gender: '',
				city: '',
				userData: {},
				userInfo: {},
				// bgColor: 'linear-gradient(to bottom, #e8eef6, #eef5f6)',
				bgColor: '#F4F5F9',
				base_lsit: [

				],
				data: [],
				count: 0,
				ownerId: null,
				timeoutObj: null,
				reConnect: true,
				socketTask: null,
				chooseimg: false,
				page: 0,
				suggestList: [],
				filterShow: false,
				ageShow: false,
				ageString: '',

				ageList: [

				],
				heightShow: false,
				heightString: '',
				heightList: [

				],
				weightShow: false,
				weightString: '',
				weightList: [

				],
				mechanismShow: false,
				mechanismString: '',
				mechanismList: [],
				deptId: '',
				minAge: '',
				maxAge: '',
				ageType: '',
				minHeight: '',
				maxHeight: '',
				heightType: '',
				minWeight: '',
				maxWeight: '',
				weightType: '',
				noticeData: {},
				noticeShow: false,
			};
		},
		onLoad() {
			_self = this;
			if (this.vuex_token) {
				// this.getUserInfo();
				setTimeout(function() {
					_self.getsysNotice();
				}, 100);

				// this.getmechanismList();
			}
		},
		onShow() {
			this.chooseimg = false;
			this.showAnima = false;
			if (this.vuex_token) {
				this.getUserInfo();
				// this.getsysNotice();
				this.getmechanismList();
			} else {
				uni.reLaunch({
					url: '/pageslogin/index/index'
				})
			}
		},

		methods: {
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			getsysNotice() {
				sysNotice({}).then(res => {
					// console.log('3434343434', res);
					if (res.data.data.length > 0) {
						this.noticeData = res.data.data[0];
						if (res.data.data[0].status == 1) {
							this.noticeShow = true;
						} else {
							this.noticeShow = false;
						}
					}
				}).catch({})
			},
			noticeClose() {
				this.noticeShow = false;
			},
			getmechanismList() {
				mechanismList({

				}).then(res => {
					this.mechanismList = [];
					this.mechanismList.push(res.data[0].children);
					var ageTempList = [];
					this.ageList = [];
					for (let index = 18; index < 60; index++) {
						ageTempList.push(index)
					}
					this.ageList.push(ageTempList);
					var heightTempList = [];
					this.heightList = [];
					for (let index = 140; index < 220; index++) {
						heightTempList.push(index)
					}
					this.heightList.push(heightTempList);
					var weightTempList = [];
					this.weightList = [];
					for (let index = 40; index < 200; index++) {
						weightTempList.push(index)
					}
					this.weightList.push(weightTempList);
				}).catch({

				})
			},
			screen() {
				this.filterShow = true;
			},
			filterClose() {
				this.filterShow = false;
			},
			ageClick(type) {
				this.weightShow = false;
				this.heightShow = false;
				this.ageShow = true;
				this.ageType = type;
			},
			heightClick(type) {
				this.ageShow = false;
				this.weightShow = false;
				this.heightShow = true;
				this.heightType = type;
			},
			weightClick(type) {
				this.ageShow = false;
				this.heightShow = false;
				this.weightShow = true;
				this.weightType = type;
			},
			mechanismClick() {
				this.mechanismShow = true;
			},
			ageConfirm(e) {
				this.ageShow = false;
				if (this.ageType == 'min') {
					if (this.maxAge && e.value[0] >= this.maxAge) {
						this.minAge = this.maxAge;
						this.maxAge = e.value[0];
					} else {
						this.minAge = e.value[0];
					}

				} else if (this.ageType == 'max') {
					if (this.minAge && e.value[0] <= this.minAge) {
						this.maxAge = this.minAge;
						this.minAge = e.value[0];
					} else {
						this.maxAge = e.value[0];
					}
				}
			},
			heightConfirm(e) {
				this.heightShow = false;
				if (this.heightType == 'min') {
					if (this.maxHeight && e.value[0] >= this.maxHeight) {
						this.minHeight = this.maxHeight;
						this.maxHeight = e.value[0];
					} else {
						this.minHeight = e.value[0];
					}

				} else if (this.heightType == 'max') {
					if (this.minHeight && e.value[0] <= this.minHeight) {
						this.maxHeight = this.minHeight;
						this.minHeight = e.value[0];
					} else {
						this.maxHeight = e.value[0];
					}
				}
			},
			weightConfirm(e) {
				this.weightShow = false;
				if (this.weightType == 'min') {
					if (this.maxWeight && e.value[0] >= this.maxWeight) {
						this.minWeight = this.maxWeight;
						this.maxWeight = e.value[0];
					} else {
						this.minWeight = e.value[0];
					}

				} else if (this.weightType == 'max') {
					if (this.minWeight && e.value[0] <= this.minWeight) {
						this.maxWeight = this.minWeight;
						this.minWeight = e.value[0];
					} else {
						this.maxWeight = e.value[0];
					}
				}
			},
			mechanismConfirm(e) {
				this.mechanismShow = false;
				this.mechanismString = e.value[0].title;
				this.deptId = e.value[0].id;
			},
			resetSearch() {
				this.ageShow = false;
				this.minAge = '';
				this.maxAge = '';
				this.heightShow = false;
				this.minHeight = '';
				this.maxHeight = '';
				this.weightShow = false;
				this.minWeight = '';
				this.maxWeight = '';
				this.mechanismShow = false;
				this.mechanismString = '';
				this.deptId = '';
			},
			confirmSearch() {
				this.getSuggestList('', this.minAge, this.maxAge, this.minHeight, this.maxHeight, this.minWeight, this
					.maxWeight, this.deptId, '1');
				this.ageShow = false;
				this.minAge = '';
				this.maxAge = '';
				this.heightShow = false;
				this.minHeight = '';
				this.maxHeight = '';
				this.weightShow = false;
				this.minWeight = '';
				this.maxWeight = '';
				this.mechanismShow = false;
				this.mechanismString = '';
				this.deptId = '';
				this.filterShow = false;

			},
			getUserInfo() {
				getUserDetail({
					userId: this.vuex_userid
				}).then(res => {
					if (res.data.status == '1' && res.data.isCharge == '4') {
						if (res.data.img1) {
							this.userInfo = res.data;
							this.homeShow = true;
							//正常请求推荐列表
							if (this.userInfo.labelList) {
								this.getSuggestList(this.userInfo.labelList[Math.floor(Math.random() * this
									.userInfo.labelList.length)].id);
							} else {
								this.getSuggestList();
							}
						} else {
							this.tipMsg = "您还未上传个人秀照片，请先完善";
							this.$refs.elm.showDialog();
							return;
						}
					} else if (res.data.status == '1' && res.data.isCharge == '1') {
						uni.reLaunch({
							url: '/pagesintroduction/selfIntroduction'
						});
					}
				}).catch({

				})
			},
			getSuggestList(labelId, ageMix, ageMax, heightMix, heightMax, weightMix, weightMax, deptId, status) {
				suggestList({
					label: labelId ? labelId : '',
					userId: this.vuex_userid,
					ageMix: ageMix ? ageMix : '',
					ageMax: ageMax ? ageMax : '',
					heightMix: heightMix ? heightMix : '',
					heightMax: heightMax ? heightMax : '',
					weightMix: weightMix ? weightMix : '',
					weightMax: weightMax ? weightMax : '',
					deptId: deptId ? deptId : '',
					queryStatus: status ? '1' : '2'
				}).then(res => {
					if (res.data) {
						if (res.data.length > 0) {
							this.isInit = true;
							var imgList = [];
							if (res.data[0].img1) {
								imgList.push(this.vuex_api + '/sysFileInfo/preview?id=' + res.data[0].img1)
							}
							if (res.data[0].img2) {
								imgList.push(this.vuex_api + '/sysFileInfo/preview?id=' + res.data[0].img2)
							}
							if (res.data[0].img3) {
								imgList.push(this.vuex_api + '/sysFileInfo/preview?id=' + res.data[0].img3)
							}
							this.userData = res.data[0];
							this.userData.imgList = imgList;
						} else {
							this.isInit = false;
						}
					} else {
						this.isInit = false;
					}
				}).catch({

				});
			},
			nextClick() {
				if (this.userInfo.labelList) {
					this.getSuggestList(this.userInfo.labelList[Math.floor(Math.random() * this.userInfo.labelList.length)]
						.id);
				} else {
					this.getSuggestList();
				}
			},
			confirma() {
				// console.log('12121212');
				uni.navigateTo({
					url: '/pagesme/me/improveInformation'
				});
			},
			likeClick() {
				//调用喜欢接口
				markLikesUser({
					userId: this.vuex_userid,
					likeId: this.userData.userId,
					status: '1'
				}).then(res => {
					if (res.code == 200) {
						this.page++;
						if (this.userInfo.labelList) {
							this.getSuggestList(this.userInfo.labelList[Math.floor(Math.random() * this.userInfo
								.labelList.length)].id);
						} else {
							this.getSuggestList();
						}
					}
				}).catch({

				})
			},

			goTips() {
				this.getSuggestList();
			},
		}

	};
</script>

<style lang="scss" scoped>
	.cell-content {
		display: flex;
		align-items: center;
	}

	.cell-item {
		border-radius: 20rpx;
		width: 120rpx;
		height: 60rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: gray;
		margin-left: 10rpx;
		margin-right: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popUpShow {
		overflow: hidden;
		height: 100vh;
	}

	.tuijian_over {
		padding: 30rpx;
		overflow: hidden;
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.imgbg {
			position: relative;
			width: 690rpx;
			height: 957rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				position: absolute;
				top: 0;
				left: 0;
				width: 690rpx;
				height: 957rpx;
			}

			.over-content {
				position: relative;
				z-index: 1;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.isover {
					color: #333333;
					font-size: 32rpx;
					font-weight: 800;
				}

				.overtime {
					margin-top: 50rpx;
					color: #333333;
					font-size: 48rpx;
					font-weight: 800;
				}

				.nxet-tuijian {
					margin-top: 70rpx;
					width: 372rpx;
					height: 84rpx;
					line-height: 84rpx;
					background: linear-gradient(to right, #c2d2f9, #c5c2f3);
					border-radius: 84rpx;
					color: #415c9e;
					font-size: 28rpx;
					font-weight: 400;
				}
			}
		}
	}

	.mutual_like {
		position: relative;
		width: 582rpx;
		height: 831rpx;
		box-sizing: border-box;

		.likepopbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 582rpx;
			height: 831rpx;
			box-sizing: border-box;
		}

		.trbg {
			box-sizing: border-box;
			position: absolute;
			top: 44rpx;
			right: 13rpx;
			width: 168rpx;
			height: 110rpx;
		}

		.like-pop-content {
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			width: 582rpx;
			height: 831rpx;
			padding: 64rpx 54rpx;
			text-align: center;

			.title {
				box-sizing: border-box;
				text-align: center;
				font-size: 40rpx;
				font-weight: bold;
			}

			.toname {
				padding-top: 18rpx;
				color: #4a4a4a;
				font-size: 28rpx;
				text-align: center;

				.toname_to {
					color: #9fb5eb;
				}
			}

			.avatar_anmi {
				padding-top: 45rpx;
				display: flex;
				height: 124rpx;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				position: relative;

				.avatar {
					width: 124rpx;
					height: 124rpx;
					border-radius: 50%;
					overflow: hidden;
					transition: all 0.3s;

					image {
						width: 100%;
						height: 100%;
					}

					&.avat_left_anmi {
						position: relative;
						left: 0;
						width: 124rpx;
						height: 124rpx;
						animation: leftMove 1s;
					}

					&.avat_right_anmi {
						position: relative;
						right: 0;
						width: 124rpx;
						height: 124rpx;
						animation: rightMove 1s;
					}
				}

				.liketo-icon {
					width: 55rpx;
					height: 41rpx;
				}
			}

			.pt52 {
				padding-top: 52rpx;
				font-size: 28rpx;
				color: #4a4a4a;
			}

			.like-pop-btn {
				width: 474rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				font-size: 28rpx;
				border-radius: 42rpx;

				&.qdzh {
					width: 100%;
					margin-top: 62rpx;
					background: linear-gradient(to right, #c2d2f9, #c5c2f3);
					color: #415c9e;
				}

				&.shzl {
					line-height: 80rpx;
					width: 100%;
					box-sizing: border-box;
					margin-top: 28rpx;
					border: 2px solid #9fb5eb;
					color: #9fb5eb;
				}
			}
		}
	}

	@keyframes leftMove {
		0% {
			left: -130rpx;
		}

		100% {
			left: 0;
		}
	}

	@keyframes rightMove {
		0% {
			right: -130rpx;
		}

		100% {
			right: 0;
		}
	}

	.unfold {
		width: 39rpx;
		height: 40rpx;
		margin: 30rpx auto;
	}

	.animate-middel-top {
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 111;
		width: 0;
		height: 0;
		// transition: all 0.5s linear;
		transform: translate(-50%, -50%);
		animation: topHide 1s linear;
	}

	@keyframes topHide {
		0% {
			top: 50%;
			width: 0;
			height: 0;
		}

		70% {
			top: 18%;
			width: 100rpx;
			height: 100rpx;
		}

		80% {
			top: 18%;
			width: 100rpx;
			height: 100rpx;
		}

		90% {
			top: 20%;
			width: 80rpx;
			height: 80rpx;
		}

		100% {
			top: 20%;
			wixdth: 0;
			height: 0;
		}
	}

	.footer-fixed {
		position: fixed;
		bottom: calc(var(--window-bottom) + 32rpx);
		left: 146rpx;
		right: 146rpx;
		z-index: 111;
		transition: all 0.3s linear;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		transition: all 1s linear;

		.right {
			width: 108rpx;
			height: 108rpx;
		}

		.left {
			width: 108rpx;
			height: 108rpx;
		}
	}

	.fixed_down {
		position: fixed;
		z-index: 12;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 40rpx;
		transition: all 0.3s linears;
	}

	.fe {
		width: 100%;
		height: 186rpx;
		position: relative;
		display: flex;
		justify-content: center;

		.text {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #bbbbbb;
			line-height: 40rpx;
			margin: 0 18rpx;
		}

		.line {
			width: 50rpx;
			height: 2rpx;
			background-color: #bbbbbb;
		}
	}

	.bo {
		.simg {
			width: 32rpx;
			height: 32rpx;
		}

		.name {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #434343;
			line-height: 40rpx;
			margin-left: 16rpx;
		}

		width: 686rpx;
		height: 98rpx;
		margin: 0 auto;
		background: #ffffff;
		margin-top: 32rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.reco_card {
		border-radius: 24rpx;
		background-color: white;
		width: 680rpx;
		height: 98rpx;
		margin: 32rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 32rpx;
			height: 32rpx;
		}

		view {
			margin-left: 16rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
	}

	.Personality_type {
		background-color: white;
		width: 680rpx;
		height: 198rpx;
		margin: 0 auto;
		// margin-top: 32rpx;
		border-radius: 24rpx 24rpx 0 0;

		.content {
			margin-left: 40rpx;
			padding-top: 32rpx;
			display: flex;
			flex-direction: column;

			.have_image {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;

				image {
					width: 28rpx;
					height: 28rpx;
				}

				.title {
					padding-left: 12rpx;
				}
			}
		}

		.center {
			margin: 0 auto;
			font-size: 36rpx;
			font-weight: bold;
			margin-top: 20rpx;
		}
	}

	.Personality_content {
		border-radius: 0 0 24rpx 24rpx;

		.item {
			display: flex;
			align-items: center;
			padding-top: 48rpx;
			margin-left: 36rpx;

			.head_text {
				width: 130rpx;
				white-space: nowrap;
			}

			.center {
				background-color: #f5f5f5;
				width: 296rpx;
				border-radius: 16rpx;
				height: 24rpx;
				position: relative;
				margin: 0 26rpx;

				.inner1,
				.inner2,
				.inner3,
				.inner4 {
					border-radius: 16rpx;
					height: 24rpx;
					width: 186rpx;
					position: absolute;

					background-color: #ff91c5;
				}
			}

			.tail_text {
				// width: 130rpx;
			}
		}

		height: 378rpx;

		width: 680rpx;
		background-color: white;
		margin: 0 auto;
	}

	.bottom {
		background-color: #fff;
		position: relative;
		width: 686rpx;
		margin: 0 auto;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		overflow: hidden;
		margin-top: 32rpx;
	}

	.line {
		width: 636rpx;
		margin: 0 auto;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;

		.sm-line {
			width: 50rpx;
			margin: 0 10rpx;
			height: 1rpx;
			background-color: #c8d3e2;
		}
	}

	.circles {
		background: #f5f6fa;
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		position: absolute;
		right: -22rpx;
		top: 174rpx;
	}

	.circle {
		background: #f5f6fa;
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		position: absolute;
		left: -22rpx;
		top: 174rpx;
	}

	page {
		width: 100%;
		height: 100vh;
	}

	.card {
		background-color: white;
		width: 680rpx;
		height: 250rpx;
		margin: 0 auto;
		margin-top: 32rpx;
		border-radius: 24rpx;

		.content {
			margin-left: 40rpx;
			padding-top: 32rpx;
			display: flex;
			flex-direction: column;

			.have_image {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;

				image {
					width: 28rpx;
					height: 28rpx;
				}

				.title {
					padding-left: 12rpx;
				}
			}

			.one {
				font-size: 28rpx;
				margin-top: 26rpx;
			}
		}
	}

	.box {
		.swiper {
			position: relative;

			.hint {
				position: absolute;
				top: 46rpx;
				right: 34rpx;
				width: 202rpx;
				height: 62rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 34rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 24rpx;
					height: 28rpx;
				}

				.t {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					margin-left: 14rpx;
				}
			}
		}

		.lable {
			display: flex;
			align-items: center;

			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #434343;
			margin-left: 50rpx;
			margin-top: 48rpx;

			.lable-div {
				height: 54rpx;
				background: #e5f4ff;
				border-radius: 28rpx;
				line-height: 54rpx;
				padding: 0 38rpx;
			}
		}

		.line {
			width: 636rpx;
			// height: 2rpx;
			// background-color: #c8d3e2;
			// border-bottom: 2rpx dashed #c8d3e2;
			margin: 0 auto;
			margin-top: 44rpx;
		}

		.circles {
			background: #f5f6fa;
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			position: absolute;
			right: -22rpx;
			top: 1002rpx;
		}

		.circle {
			background: #f5f6fa;
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			position: absolute;
			left: -22rpx;
			top: 1002rpx;
		}

		width: 686rpx;
		margin: 0 auto;
		border-radius: 42rpx 42rpx 24rpx 24rpx;
		overflow: hidden;
		z-index: 10;
		position: relative;
		background: #fff;

		.ling {
			height: 42rpx;
			display: flex;
			align-items: center;
			margin-left: 58rpx;
			margin-top: 24rpx;

			.img {
				height: 42rpx;
				width: 42rpx;
				margin-right: 8rpx;
			}

			.text {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 34rpx;
			}
		}

		.box-bq {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 58rpx;
			margin-top: 24rpx;
			line-height: 40rpx;
			display: flex;
			align-items: center;

			.xian {
				width: 2rpx;
				height: 20rpx;
				background: #e0e2e8;
				margin: 0 32rpx;
			}
		}

		.box-name {
			.simg {
				width: 48rpx;
				height: 48rpx;
				margin-left: 20rpx;
			}

			height: 56rpx;
			font-size: 40rpx;
			font-family: PingFang SC-Heavy,
			PingFang SC;
			font-weight: 800;
			color: #4a4a4a;
			line-height: 56rpx;
			margin-left: 58rpx;
			margin-top: 24rpx;
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-left: 20rpx;
				margin-top: 5rpx;
			}
		}

		.box-jj {
			.box-jj-ta {
				width: 618rpx;
				height: 58rpx;
				background: #f5f6fa;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				margin: 0 auto;
				margin-top: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.text2 {
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 34rpx;
					margin-right: 28rpx;
				}

				.box-jj-ta-left {
					display: flex;
					align-items: center;

					.xian {
						width: 2rpx;
						height: 20rpx;
						background: #e0e2e8;
						margin: 0 18rpx;
					}

					.te {
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 34rpx;
					}

					.img {
						width: 24rpx;
						height: 24rpx;
						margin: 0 18rpx 0 26rpx;
					}
				}
			}

			width: 100%;
			height: auto;
			background-color: #fff;
			position: relative;
		}
	}

	.u-nav-slot {
		display: flex;
		align-items: center;

		.text {
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #000000;
			margin-left: 14rpx;
			line-height: 44rpx;
		}

		.img {
			width: 22rpx;
			height: 28rpx;
			margin-left: 32rpx;
		}
	}

	.pageanima {
		position: relative;
	}

	.pagePop {
		animation-name: pagePop; // 动画名称
		animation-timing-function: linear; // 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束；
		// animation-delay: 1s; // 动画延迟时间
		animation-duration: 0.5s; // 动画完成时间
	}

	@keyframes pagePop {
		0% {
			top: 100rpx;
			opacity: 0.5;
		}

		100% {
			top: 0;
			opacity: 1;
		}
	}

	.bgc-imga {
		position: absolute;
		top: -100rpx;
		left: 0rpx;
		width: 100%;
		pointer-events: none;
		height: 100%;
	}

	page {
		width: 100%;
		height: 100%;
	}

	.popup-container {
		height: 562rpx;
		width: 500rpx;
		overflow: hidden;
		position: relative;

		.pop-bgc {
			position: absolute;
			top: 0;
			pointer-events: none;
			left: 0;
			height: 100%;
			width: 100%;
		}

		.moon-bg {
			position: absolute;
			top: 50rpx;
			pointer-events: none;
			right: 6rpx;
			width: 220rpx;
			height: 152rpx;
		}

		.container {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;

			.container-c {
				width: 392rpx;
				margin: auto;
				margin-top: 66rpx;
			}

			.pop-title {
				color: #4a4a4a;
				font-weight: 800;
				font-size: 40rpx;
			}

			.tips-content {
				width: 448rpx;
				margin: auto;
				text-align: left;
				margin-top: 20rpx;
				line-height: 56rpx;
				font-size: 28rpx;

				.agreement-btn {
					display: inline-block;
					color: #5b83e8;
					text-decoration: underline;
				}
			}

			.btn-c {
				display: flex;
				margin: auto;
				margin-top: 108rpx;
				justify-content: space-between;
				flex-wrap: wrap;
				width: 100%;
			}

			.pop-btn {
				width: 100%;
				height: 84rpx;
				border-radius: 38rpx;
				text-align: center;
				line-height: 84rpx;
				border: 2rpx solid #9fb5eb;
				color: #9fb5eb;
				margin-top: 28rpx;

				&.to-login {
					margin-top: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					border: none;
					color: #415c9e;

					background: linear-gradient(86deg, #c2d2f9 0%, #c5c2f3 100%);

					.sercet-btn {
						vertical-align: middle;
						width: 78rpx;
						height: 40rpx;
						background: #b6b7f8;
						border-radius: 22rpx;
						font-size: 24rpx;
						transform: scale(0.81);
						transform-origin: center;
						color: #fff;
						line-height: 40rpx;
					}
				}
			}
		}
	}

	.bullet-box {
		background-color: #fff;
		width: 640rpx;
		// height: 65vh;
		border-radius: 20rpx;

		.top {
			width: 640rpx;
			height: 260rpx;

			.bg {
				width: 640rpx;
				height: 260rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx 20rpx 0 0;
				}
			}

			.sub {
				width: 640rpx;
				height: 260rpx;
				position: relative;
				top: -260rpx;
				text-align: center;
				color: #fff;
				font-size: 36rpx;
				letter-spacing: 5rpx;

				.icon {
					margin-top: 20rpx;
					margin-bottom: 10rpx;
					border-radius: 120rpx;

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 120rpx;
					}
				}
			}
		}


		.scroll-Y {
			margin-top: 30rpx;
			margin-bottom: 10rpx;
			height: 45vh;

			.content {
				margin: 0 30rpx;
			}
		}

		.button {
			margin: 20rpx 100rpx;
		}
	}

	.bullet-close {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
	}

	.index-gao-swiper-text {
		width: 100%;
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		font-size: 32rpx;
	}

	.index-gao-swiper {
		float: left;
		width: 70%;
		height: 40rpx;
		position: relative;
		bottom: 8rpx;
	}

	.index-gao-text {
		float: left;
		width: 133rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}

	.index-gao {
		background: #fff;
		margin-top: 10rpx;
		padding: 20rpx 3% 10rpx 3%;
		clear: both;
		overflow: hidden;
	}

	.index-article-list {
		width: 94%;
		margin: 0 auto;
	}

	.index-article-top-more {
		float: right;
		color: #969696;
		font-size: 34rpx;
		margin-right: 15rpx;
	}

	.index-article-top-zhe {
		float: right;
		width: 30rpx;
		height: 30rpx;
		position: relative;
		top: 8rpx;
		margin-right: 3%;
	}

	.index-article-top-text {
		font-size: 36rpx;
		letter-spacing: 1rpx;
		font-weight: 500;
		position: relative;
		left: 14rpx;
		bottom: 7rpx;
	}

	.index-article-top-shu {
		display: inline-block;
		width: 6rpx;
		height: 36rpx;
		background: linear-gradient(to bottom, #FF9000, #F64330);
		margin-left: 3%;
	}

	.index-article-top {
		clear: both;
		overflow: hidden;
		border-bottom: 1px solid #F0F0F0;
		padding-top: 24rpx;
		padding-bottom: 20rpx;
	}

	.index-article {
		background: #fff;
		margin-top: 10rpx;
	}

	.index-nav-li-text {
		margin-top: 14rpx;
		display: block;
	}

	.index-nav-li-img {
		width: 66rpx;
		height: 66rpx;
		display: block;
		margin: 0 auto;
	}

	.index-nav-li {
		width: 25%;
		text-align: center;
		font-size: 26rpx;
		color: #646464;
		letter-spacing: 1rpx;
		padding: 40rpx 0 0 0;
		float: left;
	}

	.index-nav {
		padding: 0 3% 0 3%;
		clear: both;
		overflow: hidden;
		padding-bottom: 40rpx;
		background: #fff;
	}

	.index-swiper {
		width: 100%;
		height: 500rpx;
	}

	.index-swiper-swiper {
		width: 100%;
		height: 100%;
	}

	.index-swiper-swiper-img {
		width: 100%;
		height: 100%;
	}

	.article-list-li-right-date {
		font-size: 28rpx;
		margin-top: 46rpx;
		color: #969696;
	}

	.article-list-li-right-title {
		font-size: 36rpx;
		letter-spacing: 1rpx;
		font-weight: 500;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		height: 98rpx;
	}

	.article-list-li-right {
		float: left;
		width: 64%;
		margin-left: 4%;
	}

	.article-list-li {
		clear: both;
		overflow: hidden;
		height: 170rpx;
		padding: 40rpx 0 40rpx 0;
		border-bottom: 1rpx solid #F0F0F0;
		width: 100%;
	}

	.article-list-li-thumb {
		width: 32%;
		height: 100%;
		float: left;
	}
</style>